<template>
	<pro-table
		ref="protable"
		:loadDataUrl="api.getList"
		rowKey="userId"
		:columns="columns"
		disabledKey="userId"
		:disabledValue="superAdminId"
		:orgId="globalOrgId"
		:extendParam="{
			userType: selectValue,
			orgId: globalOrgId,
		}"
		@selectedRowChange="onSelectChange"
		@setTableData="setTableData"
		@addRecord="addRecord"
		@changeSelect="changeSelect"
		@handlerReset="handlerReset"
	>
		<!-- <template slot="extraFilter">
			<div class="filter">
				<span class="title">账户类型：</span>
				<template v-for="(item, index) in userTypeEnum">
					<a-checkable-tag
						:key="item.value"
						:checked="item.value == selectValue"
						@change="(checked) => changeUserType(item, checked, index)"
					>
						{{ item.text }}
					</a-checkable-tag>
				</template>
			</div>
		</template> -->
		<template slot="hd-button">
			<a-space :size="8">
				<div class="line"></div>
				<a-button type="link" :disabled="selectedRowKeys.length <= 0" @click="showDeleteConfirm(0)"
					>删除
				</a-button>
				<div class="line"></div>
				<a-button
					type="link"
					:disabled="selectedRowKeys.length <= 0"
					@click="showResetPwdConfirm(1, selectedRowKeys)"
					>批量重置密码</a-button
				>
			</a-space>
		</template>
		<span slot="operation" slot-scope="{ text, record }" class="operation" v-if="record.username !== 'superadmin'">
			<a href="javascript:;" title="编辑" class="add" @click="editRecord(record)">编辑</a>
			<a
				href="javascript:;"
				title="删除"
				class="del"
				@click="showDeleteConfirm(1, record.userId, record.username)"
				>删除</a
			>
			<a-dropdown placement="bottomRight" v-if="$_has('sys:user:setUserRole') || $_has('sys:user:resetPass')">
				<a class="add" @click="(e) => e.preventDefault()">更多操作</a>
				<a-menu slot="overlay">
					<a-menu-item @click="setRoleUser(record)" v-if="$_has('sys:user:setUserRole')">
						<i class="iconfont icon-role"></i>
						分配角色
					</a-menu-item>
					<a-menu-item
						@click="setUserOrg(record)"
						v-if="
							$_has('sys:user:setUserOrg') &&
							record.roleList.some((item) => item.roleCode == 'mang_admin')
						"
					>
						<i class="iconfont icon-dept-other"></i>
						分配机构
					</a-menu-item>
					<a-menu-item @click="showResetPwdConfirm(0, record)" v-if="$_has('sys:user:resetPass')">
						<i class="iconfont icon-changepwd"></i>
						重置密码
					</a-menu-item>
				</a-menu>
			</a-dropdown>
		</span>
		<template slot="compressAvatar" slot-scope="{ text, record, index }">
			<img
				:src="fileUrl + record.compressAvatar"
				:large="fileUrl + record.avatar"
				v-if="text"
				class="avatar"
				:preview="index"
				:preview-text="record.name"
			/>
		</template>

		<div slot="orgName" slot-scope="{ text, record }">
			<a-tooltip placement="topLeft" v-if="record.userType != '06'">
				<template slot="title">
					<span>{{ text }}</span>
				</template>
				<div>{{ text }}</div>
			</a-tooltip>

			<a-tooltip placement="topLeft" v-else>
				<template slot="title">
					<p style="margin-bottom: 0" v-for="(item, index) in record.orgNames">{{ item }}</p>
				</template>
				<div v-if="record.orgNames.length > 0">
					<a-tag color="pink" style="max-width: 150px" class="ant-table-row-cell-ellipsis">
						{{ record.orgNames[0] }}
					</a-tag>
				</div>
				<div v-else>
					{{ record.orgNames[0] }}
				</div>
			</a-tooltip>
		</div>
		<div slot="realName" slot-scope="{ text, record }">
			<a-tooltip placement="topLeft">
				<template slot="title">
					<span>{{ text }}</span>
				</template>
				<div>{{ text }}</div>
			</a-tooltip>
		</div>
		<div slot="roleNames" slot-scope="{ text, record }">
			<a-tooltip placement="topLeft" v-for="(item, index) in deduplication(text)">
				<template slot="title">
					<span>{{ item.roleName }}</span>
				</template>
				<div>{{ item.roleName }}</div>
			</a-tooltip>
		</div>
		<div slot="deptName" slot-scope="{ text, record }">
			<a-tooltip placement="topLeft">
				<template slot="title">
					<span>{{ text }}</span>
				</template>
				<div>{{ text }}</div>
			</a-tooltip>
		</div>
		<span class="tag" :class="{ active: text == 1 }" slot="status" slot-scope="{ text }">{{
			text == 0 ? '启用' : '停用'
		}}</span>
		<span slot="userType" slot-scope="{ text }">{{ text | filterUserTypeName }}</span>
		<!-- 添加，编辑 -->
		<add-or-edit-user-modal ref="addOrEditModal" :api="api" modalTitle="账号" @ok="handlerRefresh">
		</add-or-edit-user-modal>
		<!-- 角色 -->
		<set-role-modal ref="setRoleModal" @ok="handlerRefresh"></set-role-modal>
		<!-- 分配机构 -->
		<set-user-org-modal ref="setUserOrgModal" @ok="handlerRefresh"></set-user-org-modal>
		<!-- 重置密码 -->
		<rest-password-modal ref="restPasswordModal"></rest-password-modal>
	</pro-table>
</template>

<script>
import { rowSelection, recordOperation } from '@/mixins';
import { userTypeEnum } from '@/utils/enumeration.js';
import { sysManageapi } from '@/api/index.js';
import addOrEditUserModal from './module/addOrEditUserModal';
import restPasswordModal from './module/restPasswordModal';
import setRoleModal from './module/setRoleModal';
import setUserOrgModal from './module/setUserOrgModal';
import tabsTag from '@/components/tabsTag';
import { mapState, mapMutations, mapActions } from 'vuex';
export default {
	name: 'accountlist',
	mixins: [rowSelection, recordOperation],
	components: {
		addOrEditUserModal,
		setRoleModal,
		restPasswordModal,
		tabsTag,
		setUserOrgModal,
	},
	data() {
		return {
			userTypeEnum,
			columns: [
				{
					title: '所属机构',
					dataIndex: 'orgName',
					key: 'orgName',
					searchInfo: {
						value: 'orgId',
						type: 'select',
						defaultValue: undefined,
						optionlist: [],
					},
					scopedSlots: {
						customRender: 'orgName',
					},
					ellipsis: true,
				},
				{
					title: '账户',
					dataIndex: 'username',
					key: 'username',
					searchInfo: {
						type: 'string',
						defaultValue: '',
					},
					ellipsis: true,
				},
				{
					title: '姓名',
					dataIndex: 'realName',
					key: 'realName',
					scopedSlots: {
						customRender: 'realName',
					},
					searchInfo: {
						type: 'string',
						defaultValue: '',
					},
				},
				{
					title: '部门',
					dataIndex: 'deptName',
					key: 'deptName',
					scopedSlots: {
						customRender: 'deptName',
					},
				},
				// {
				// 	title: '账户类型',
				// 	dataIndex: 'userType',
				// 	key: 'userType',
				// 	scopedSlots: {
				// 		customRender: 'userType',
				// 	},
				// },
				{
					title: '角色',
					dataIndex: 'roleList',
					key: 'roleList',
					scopedSlots: {
						customRender: 'roleNames',
					},
				},
				/* {
						title: '邮箱',
						key: 'email',
						dataIndex: 'email',
						ellipsis: true
					},
					{
						title: '手机号码',
						key: 'phone',
						dataIndex: 'phone',
						width: 120,
						searchInfo: {
							type: 'string',
							defaultValue: ''
						}
					}, */
				{
					title: '状态',
					dataIndex: 'status',
					key: 'status',
					align: 'center',
					width: 100,
					scopedSlots: {
						customRender: 'status',
					},
					searchInfo: {
						type: 'select',
						defaultValue: undefined,
						optionlist: [
							{
								value: 0,
								text: '启用',
							},
							{
								value: 1,
								text: '停用',
							},
						],
					},
				},
				{
					title: '操作',
					key: 'operation',
					dataIndex: 'operation',
					scopedSlots: {
						customRender: 'operation',
					},
					// align: 'center',
					width: 200,
					fixed: 'right',
				},
			],
			api: sysManageapi.userUrl,
			extendParam: {},
			fileUrl: process.env.VUE_APP_FILE_API,
			tablelist: [],
			superAdminId: '',
			orgId: '',

			selectValue: '',
			/* roleList: [{
					"itemValue": 1,
					itemText: "教师"
				}, {
					"itemValue": 2,
					itemText: "家长"
				}],
				selectRole: 1, */
		};
	},
	computed: {
		...mapState(['user']),
	},
	created() {
		//this.userTypeEnum=userTypeEnum.unshift({text:'全部',value:''})
		let newUserTypeEnum = this.isMangAdmin
			? userTypeEnum.filter((item) => item.value != '00' && item.value != '06')
			: userTypeEnum;
		this.userTypeEnum = [{ text: '全部', value: '' }].concat(newUserTypeEnum);
		/* this.columns = columns.filter(item => {
				if (!(!this.isAdmin && item.key == 'userType')) {
					return item;
				}
			}); */
		/* this.columns = columns['columns0'].filter(item => {
				if (!(!this.isAdmin && item.key == 'userType')) {
					return item;
				}
			}); */
	},
	methods: {
		/* 确认重置密码 */
		showResetPwdConfirm(type, record) {
			this.$refs.restPasswordModal.resetPwd(type, record);
		},
		setRoleUser(record) {
			this.$refs.setRoleModal.show(record);
		},
		//分配机构
		setUserOrg(record) {
			this.$refs.setUserOrgModal.show(record);
		},
		/* 选中部门，刷新列表 */
		selectTree(selectedDept) {
			this.selectedDept = !!selectedDept
				? {
						...selectedDept,
				  }
				: null;
			this.extendParam = {
				deptId: !!selectedDept ? this.selectedDept.deptId : '',
			};
			this.$nextTick(() => {
				this.handlerRefresh();
			});
		},
		setTableData(list) {
			this.tablelist = [...list];
			let superAdmin = this.tablelist.find((item) => item.userType == '00');
			console.log('superAdmin' + JSON.stringify(superAdmin));
			this.superAdminId = (superAdmin ? superAdmin.userId : '') || '';
		},
		changeSelect(e, value) {
			if (value == 'orgId') {
				this.orgId = e;
			}
		},
		/* 筛选条件重置, 将渔场默认设置为undefined */
		handlerReset(obj) {
			this.orgId = 1; //为了刷新一次选中部门
			this.$nextTick(() => {
				this.orgId = '';
				this.$refs.protable.loadTable();
			});
		},
		//切换角色
		changeUserType(item, checked, index) {
			this.selectValue = item.value;
			this.$nextTick(() => {
				this.handlerRefresh();
			});
		},
		//去重角色
		deduplication(roleList) {
			let newArrId = [];
			let newArrObj = [];
			roleList.forEach((item) => {
				if (!newArrId.includes(item.roleCode)) {
					newArrId.push(item.roleCode);
					newArrObj.push(item);
				}
			});
			return newArrObj;
		},
	},
	filters: {
		filterUserTypeName: function (value) {
			if (userTypeEnum && userTypeEnum.length > 0) {
				let index = userTypeEnum.findIndex((item) => item.value == value);
				if (index > -1) {
					return userTypeEnum[index].text;
				} else {
					return '';
				}
			}
		},
	},
};
</script>

<style scoped="scoped" lang="less">
.avatar {
	width: 60px;
	height: 60px;
	border-radius: 8px;
	display: block;
	margin: 0 auto;
}

/deep/.filter {
	padding: 20px 15px 0;

	.title {
	}

	.ant-tag {
		cursor: pointer;
		font-size: 14px;
		margin-left: 20px;
		padding: 0 10px;
	}
}
</style>
